<template>
  <div style="width:100vw;" class="patent-box">
    <div class="record-header">
      <!-- 返回按钮 -->
      <!-- <mt-header fixed title="我的课程">
        <router-link to="/StudyCenter" slot="left">
          <mt-button class="back-butt" icon="back"></mt-button>
        </router-link>
      </mt-header>-->
    </div>
    <div>
      <mt-navbar fixed v-model="active">
        <mt-tab-item id="status_0">待审批</mt-tab-item>
        <mt-tab-item id="status_1">待讲</mt-tab-item>
        <mt-tab-item id="status_2">已讲</mt-tab-item>
      </mt-navbar>
      <div class="page-tab-container">
        <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
          <mt-tab-container-item id="status_0">
            <!-- cell组件 -->
            <div class="bscroll" ref="applying">
              <div class="bscroll-container">
                <div class="default-page-box" v-show="applying.length == 0">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div
                  @click="goDetail(item.id,'status_0')"
                  v-for="(item,index) in applying"
                  :key="index"
                  class="patent-body"
                >
                  <div class="flex-row parent-body-item">
                    <div class="class-content">
                      <p class="content-tip">{{item.title}}</p>
                      <p class="content-time">培训时间：{{item.openTime}}</p>
                      <p class="content-bumen">归属部门：{{item.deptName || '外部导师'}}</p>
                      <p class="content-teacher">
                        <span style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></span>
                        讲师：{{item.username}}
                      </p>
                    </div>
                    <div
                      class="class-status"
                    >{{item.status == 0 ? '待审批' : item.status == 1 ? '已审批' : item.status == 2 ? '已驳回' : '待审批'}}</div>
                  </div>
                  <div v-show="loadingDown" style="padding:10px;text-align:center;">
                    <mt-spinner type="snake"></mt-spinner>
                  </div>
                  <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
                </div>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="status_1">
            <div @click="actionSheet" class="action-sheet">
              <p class="action-text">
                全部
                <span
                  style="font-size:8px;position:relative;top:-2px;left:5px;"
                  class="iconfont iconsanjiao"
                ></span>
              </p>
            </div>
            <div style="position:fixed;z-index:10;top:88px;">
              <div style="position:relative;">
                <ul class="action-ul" v-show="sheetVisible">
                  <li @click="activeLi(1)" :class="{'active-li':activeds}">全部</li>
                  <li @click="activeLi(2)" :class="{'active-li':activedss}">待讲</li>
                  <li @click="activeLi(3)" :class="{'active-li':activedsss}">待发布</li>
                </ul>
              </div>
            </div>
            <div v-show="sheetVisible" @click="hideSheet" class="action-modal"></div>
            <!-- cell组件 -->
            <div class="bscroll" ref="tolding">
              <div
                :style="loadedDown ? 'padding-bottom:0;' : 'padding-top:40px;'"
                class="bscroll-container"
              >
                <div class="default-page-box" v-show="tolding.length == 0">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div
                  @click="goDetail(item.id,item.isOpen)"
                  v-for="(item,index) in tolding"
                  :key="index"
                  class="patent-body"
                >
                  <div class="flex-row parent-body-item">
                    <div class="class-content">
                      <p class="content-tip">{{item.title}}</p>
                      <p class="content-time">培训时间：{{item.openTime}}</p>
                      <p class="content-bumen">归属部门：{{item.deptName || '外部导师'}}</p>
                      <p class="content-teacher">
                        <span style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></span>
                        讲师：{{item.username}}
                      </p>
                    </div>
                    <div
                      class="class-status"
                    >{{item.isOpen == 0 ? '待发布' : item.isOpen == 1 ? '待结课' : ''}}</div>
                  </div>
                </div>
                <div v-show="loadingDown" style="padding:10px;text-align:center;">
                  <mt-spinner type="snake"></mt-spinner>
                </div>
                <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="status_2">
            <!-- cell组件 -->
            <div class="bscroll" ref="tolded">
              <div :style="loadedDown ? 'padding-bottom:0;' : ''" class="bscroll-container">
                <div class="default-page-box" v-show="tolded.length == 0">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div
                  @click="goDetail(item.id,4)"
                  v-for="(item,index) in tolded"
                  :key="index"
                  class="patent-body"
                >
                  <div class="flex-row parent-body-item">
                    <div class="class-content">
                      <p class="content-tip">{{item.title}}</p>
                      <p class="content-time">培训时间：{{item.openTime}}</p>
                      <p class="content-bumen">归属部门：{{item.deptName || '外部导师'}}</p>
                      <p class="content-teacher">
                        <span style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></span>
                        讲师：{{item.username}}
                      </p>
                    </div>
                    <div class="class-status">{{item.teaStatus == 1 ? '已完成' : '待完成'}}</div>
                  </div>
                </div>
                <div v-show="loadingDown" style="padding:10px;text-align:center;">
                  <mt-spinner type="snake"></mt-spinner>
                </div>
                <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
              </div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
const easydate = require("../../untils/easydate");
export default {
  name: "testUI",
  data() {
    return {
      active: "status_0",
      loadingDown: false,
      loadingUp: false,
      loadedDown: false,
      applying: [],
      tolding: [],
      tolded: [],
      activeds: true,
      activedss: false,
      activedsss: false,
      sheetVisible: false,
      pageTotal: ""
    };
  },
  mounted() {
    this.$post("appMyCourseList").then(res => {
      if (res.success) {
        this.applying = res.data;
        if (res.data && res.data.length > 0) {
          res.data.map(function(item) {
            for (var key in item) {
              if (key == "openTime") {
                item[key] = easydate(item[key]).format("yyyy-MM-dd");
              }
            }
          });
          this.pageTotal = res.data && res.data[0].totals;
        }
        // 初始化滚动
        this.initScroll("applying");
        this.initScroll("tolding");
        this.initScroll("tolded");
      }
    });

    // 设置课程标题
    setText("我的课程");
  },
  computed: {},
  watch: {
    active(oldVal, newVal) {
      let oldVals = oldVal.split("_")[1];
      this.loadedDown = false;
      if (oldVals == 0) {
        this.classFunction("appMyCourseList", "applying");
        this.applying = [];
      } else if (oldVals == 1) {
        this.classFunction("openMyCourseList", "tolding", 3);
        this.tolding = [];
      } else if (oldVals == 2) {
        this.classFunction("achieveMyCourseList", "tolded");
        this.tolded = [];
      }
    }
  },
  methods: {
    hideSheet() {
      this.sheetVisible = false;
    },
    actionSheet() {
      this.sheetVisible = !this.sheetVisible;
    },
    activeLi(index) {
      if (index == 1) {
        this.tabActive1(true, false, false);
        this.tolding = [];
        this.classFunction("openMyCourseList", "tolding", 3);
      } else if (index == 2) {
        this.tabActive1(false, true, false);
        this.tolding = [];
        this.classFunction("openMyCourseList", "tolding", 1);
      } else if (index == 3) {
        this.tabActive1(false, false, true);
        this.tolding = [];
        this.classFunction("openMyCourseList", "tolding", 0);
      }
    },
    tabActive1(blean1, blean2, blean3) {
      this.activeds = blean1;
      this.activedss = blean2;
      this.activedsss = blean3;
    },
    classFunction(url, type, isopen) {
      let params = {};
      let that = this;
      if (url == "openMyCourseList") {
        params.isOpen = isopen;
      }
      that.$get(url, params).then(res => {
        if (res.data && res.data.length > 0) {
          that.pageTotal = res.data && res.data[0].totals;
          res.data.map(function(item) {
            for (var key in item) {
              if (key == "openTime" || key == "updateTime") {
                item[key] = easydate(item[key]).format("yyyy-MM-dd");
              }
            }
          });
          that[type] = that[type].concat(res.data);
          that.loadingDown = false;
          that.loadingUp = false;
          that.sheetVisible = false;
        } else {
          that.loadingDown = false;
          that.loadingUp = false;
          that.sheetVisible = false;
        }
      });
    },
    goDetail(id, isopen) {
      let num = 4;
      if (isopen == 0) {
        num = 2;
      } else if (isopen == "status_0") {
        num = 1;
      } else if (isopen == 1) {
        num = 5;
      }
      this.$router.push({
        path: "/classDetail",
        query: { id: id, statusNum: num }
      });
    },
    initScroll(dom) {
      let that = this;
      that.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        let bScroll = new BScroll(bscrollDom, {
          click: true,
          probeType: 2,
          bounceTime: 700, //回弹时间
          useTransition: false // 防止iphone微信滑动卡顿
        });
        // bScroll.on("pullingDown", () => {
        //   that.loadingUp = true;
        //   that.loadedDown = false;
        //   that.params.page = 1;
        //   setTimeout(() => {
        //     that.classFunction(that.params, dom, "downLoad");
        //   }, 1000);
        //   bScroll.finishPullDown();
        // });
        // bScroll.on("pullingUp", () => {
        //   let { pageTotal } = that;
        //   console.log(pageTotal);
        //   if (that[dom].length < pageTotal) {
        //     that.loadingDown = true;
        //     that.params.page++;
        //     setTimeout(() => {
        //       that.classFunction(that.params, dom, "upLoad");
        //     }, 1000);
        //   } else {
        //     that.loadedDown = true;
        //   }
        //   bScroll.finishPullUp();
        // });
        // bScroll.refresh();
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/my-class.less");
.content-tip {
  width: 500/75rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
.bscroll-container {
  padding-bottom: 50px;
}
.item {
  display: inline-block;
}

.nav {
  padding: 10px;
}

.link {
  color: inherit;
  padding: 20px;
  display: block;
}
// .mint-navbar.is-fixed {
//   top: 40px;
// }
.page-tab-container {
  padding-top: 49px;
}
.mint-navbar .mint-tab-item.is-selected {
  border-width: 1px;
}
.action-sheet {
  position: fixed;
  left: 0;
  right: 0;
  padding: 0 30/75rem;
  height: 41px;
  line-height: 41px;
  border-bottom: 0.5px solid rgba(227, 227, 227, 1);
  background-color: #eeeeee;
  z-index: 999;
  .action-text {
    font-size: 26/75rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
  }
}
.action-ul {
  position: absolute;
  width: 215/75rem;
  line-height: 100/75rem;
  margin-left: -30/75rem;
  text-align: center;
  font-size: 26/75rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  background-color: #e3e3e3;
  .active-li {
    background-color: #4787e4;
    color: #ffffff;
  }
}
.action-modal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 41px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
}
</style>
